<route lang="json5">
{
style: {
navigationBarTitleText: '登录',
navigationBarBackgroundColor: '#4080FF',
navigationBarTextStyle: 'white'
}
}
</route>

<template>
  <view class="h-screen bg-[#fafafa] overflow-hidden flex flex-col">
    <ToastAgent />
    <!-- 头部背景：20%高度 -->
    <view class="h-[20%] bg-gradient-to-r from-[#3977fe] to-[#6aa1ff] relative">
      <view class="absolute left-[40rpx] bottom-[60rpx] text-white">
        <text class="block text-[32rpx] leading-[1.5]">你好，</text>
        <text class="block text-[40rpx] font-semibold leading-[1.5]">欢迎使用XXXX系统</text>
      </view>
    </view>

    <!-- 中间内容区域：45%高度 -->
    <view class="h-[45%] relative">
      <view class="content-box rounded-t-[30rpx] bg-white -mt-[30rpx] relative z-10 h-full overflow-auto">
        <view class="p-[30rpx]">
          <!-- 登录类型切换 -->
          <view class="login-tabs">
            <view
              class="login-tab-item"
              :class="{ active: !isPhoneLogin }"
              @click="switchLoginType(false)"
            >
              账号登录
            </view>
            <view
              class="login-tab-item"
              :class="{ active: isPhoneLogin }"
              @click="switchLoginType(true)"
            >
              手机号登录
            </view>
          </view>

          <!-- 登录表单 -->
          <view class="login-form">
            <AccountLoginForm
              v-if="!isPhoneLogin"
              ref="accountFormRef"
              :loading="loading"
              @submit="handleSubmit"
              @forgot-password="handleForgotPassword"
              @register="handleRegister"
            />
            <PhoneLoginForm
              v-else
              ref="phoneFormRef"
              :loading="loading"
              @submit="handleSubmit"
              @forgot-password="handleForgotPassword"
              @register="handleRegister"
            />
          </view>
        </view>
      </view>
    </view>

    <!-- 底部区域：35%高度 -->
    <view class="h-[35%] flex flex-col justify-center items-center relative">
      <!-- 其他登录方式 -->
      <view class="other-login mb-[80rpx]">
        <view class="divider">
          <view class="line"></view>
          <text class="divider-text">其它登录方式</text>
          <view class="line"></view>
        </view>

        <view class="login-icons">
          <view class="login-icon-item" @click="otherLogin('gitee')">
            <image :src="Gitee" class="icon-image" />
            <text class="icon-text">Gitee</text>
          </view>
          <view class="login-icon-item" @click="otherLogin('github')">
            <image :src="GitHub" class="icon-image" />
            <text class="icon-text">GitHub</text>
          </view>
        </view>
      </view>

      <!-- 底部协议区域 -->
      <view class="bottom-area">
        <view class="agreement">
          登录即表明同意
          <text class="link" @click="openAgreement('service')">《服务用户协议》</text>
          和
          <text class="link" @click="openAgreement('privacy')">《隐私政策》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import Gitee from '@/static/images/login/gitee.svg'
import GitHub from '@/static/images/login/github.svg'
import { toast } from 'sard-uniapp'
import ToastAgent from 'sard-uniapp/components/toast-agent/toast-agent.vue'
import AccountLoginForm from './components/AccountLoginForm.vue'
import PhoneLoginForm from './components/PhoneLoginForm.vue'

// 表单引用
const accountFormRef = ref()
const phoneFormRef = ref()

// 登录状态
const loading = ref(false)
const isPhoneLogin = ref(false)

// 切换登录类型
function switchLoginType(isPhone: boolean) {
  if (isPhoneLogin.value === isPhone)
    return

  isPhoneLogin.value = isPhone

  // 重置相应的表单
  if (accountFormRef.value && !isPhone) {
    accountFormRef.value.resetForm()
  }

  if (phoneFormRef.value && isPhone) {
    phoneFormRef.value.resetForm()
  }
}

// 处理表单提交
function handleSubmit(result: any) {
  loading.value = true
  console.log(result)

  if (result.success) {
    // 登录成功
    toast.success('登录成功')

    // 登录成功后跳转
    uni.switchTab({
      url: '/pages/home/index',
    })
  }
  else {
    // 登录失败
    toast.fail(result.error || '登录失败')
  }

  loading.value = false
}

// 忘记密码
function handleForgotPassword() {
  toast('忘记密码功能暂未开放', { position: 'center' })
}

// 注册
function handleRegister() {
  toast('注册功能暂未开放', { position: 'center' })
}

// 第三方登录
function otherLogin(type: string) {
  toast.success(`${type}登录`, {
    position: 'center',
  })
}

// 打开协议页面
function openAgreement(type: 'service' | 'privacy') {
  const title = type === 'service' ? '服务用户协议' : '隐私政策'
  toast(`即将打开${title}`, { position: 'center' })
  // 实际项目中应该跳转到相应的协议页面
  // uni.navigateTo({
  //   url: `/pages/agreement/${type}`
  // })
}
</script>

<style scoped lang="scss">
/* 确保整个页面和所有容器都不会滚动 */
:deep(page) {
  overflow: hidden !important;
  height: 100% !important;
}

.content-box {
  display: flex;
  flex-direction: column;
  /* 确保内容区域高度不会超出 */
  max-height: 100%;
}

.login-tabs {
  display: flex;
  margin-bottom: 30rpx;

  .login-tab-item {
    position: relative;
    flex: 1;
    padding: 0 10rpx 15rpx;
    font-size: 32rpx;
    color: #888;
    text-align: center;
    transition: color 0.3s;

    &.active {
      color: #3977fe;
      font-weight: 500;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 30%;
        width: 40%;
        height: 4rpx;
        background-color: #3977fe;
        border-radius: 4rpx;
      }
    }
  }
}

.login-form {
  margin-top: 15rpx;
}

.other-login {
  width: 100%;
  text-align: center;

  .divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30rpx;
    padding: 0 30rpx;
    .line {
      flex: 1;
      height: 1px;
      background-color: #eaeaea;
    }

    .divider-text {
      padding: 0 30rpx;
      font-size: 26rpx;
      color: #999;
    }
  }

  .login-icons {
    display: flex;
    justify-content: center;
    gap: 80rpx;

    .login-icon-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon-image {
        width: 70rpx;
        height: 70rpx;
        transition: transform 0.2s;

        &:active {
          transform: scale(0.9);
        }
      }

      .icon-text {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.bottom-area {
  width: 100%;
  text-align: center;

  .agreement {
    font-size: 24rpx;
    color: #999;
    line-height: 1.5;
  }

  .link {
    color: #3977fe;
    display: inline-block;
    margin: 0 4rpx;
  }
}
</style>
